<!-- 采用时间倒序的方式列出可以报名的活动列表，如果已经报过名了，就显示“已报名”图标 -->
<template>
	<view class="page">
		<u-navbar title="活动" :autoBack="true" leftIconSize="16"
							@leftClick="leftClick" :titleStyle="{color:'#303133',fontSize:'32rpx'}"></u-navbar>
		<view class="status_bar"></view>
		<view class="status_bar_space"></view>
		<!-- <uni-load-more :status="status"></uni-load-more> -->
			<view class="newsView" v-for="(listItem,itemIndex) in actiList" :key="itemIndex" 
			      @click="showDetail(listItem.playEventId)">
				<view class="newsView-up"> <!--上半部分-->
					<view class="up-L"> <!--图片容器-->
						<image :src="listItem.logUrl" class="img"></image>
					</view>
					<view class="up-M"> <!--中间3行容器-->
						<view class="line1">{{listItem.peName}}</view>
						<view class="line2">时间：{{listItem.startTime}}</view>
						<view class="line2">地点：{{listItem.peAddress}}</view>
					</view>
					<view class="up-R">
						<image v-if="listItem.playerStatus!=null" src="../../static/list/yibaoming.png" class="icon"></image>
					</view>
				</view>
				<view class="newsView-down">
					<view class="fontStyle" style="text-align: right;width: 150rpx;">总名额：</view>
					<view class="fontStyle" style="text-align: left;width: 75rpx;">{{listItem.totalCount==null?0:listItem.totalCount}}人</view>
					<view class="fontStyle" style="text-align: right;width: 150rpx;">当前报名：</view>
					<view class="fontStyle" style="text-align: left;width: 125rpx;">{{listItem.signUpCount}}人</view>
					<view class="gStyle" style="width: 100rpx;">
					</view>
					<view class="gStyle" style="width: 100rpx;">
					</view>
				</view>
			</view>
			
			<u-tabbar :value="bottomTab" @change="name => bottomTab = name" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<u-tabbar-item text="活动列表" icon="list"></u-tabbar-item>
				<u-tabbar-item text="我的活动" icon="list-dot" @click="gotoMyActi()"></u-tabbar-item>
				<u-tabbar-item text="我创建的" icon="man-add-fill" @click="gotoMyActi_M()" v-if="isActiadmin"></u-tabbar-item>
			</u-tabbar>
	</view>
</template>

<script>
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				bottomTab: 0, //底部链接tabbar高亮控制
				isActiadmin:false, //是否是活动管理员（可以发起与参与活动），底部链接tabbar显示控制
				
				//分页加载相关
				actiList:[] , //活动列表数据
				total:undefined, //总共多少条数据
				formData:{
					pageSize:5,  //每页5条数据
					page:1,       //第几页
					status: "waiting", //只显示可报名的
					type:"play_event", //代表活动
				},
				status: 'more', //加载时显示状态
				//以上是分页相关
				
				//在此之上补充页面变量
			}
		},
		onLoad() {
			this.isActiadmin=getApp().globalData.isActiadmin;
			console.log("活动主页面用于底部显示控制的变量isActiadmin==",this.isActiadmin);
			uni.startPullDownRefresh();
			//this.listActi();//加载数据
		},
		//分页相关
		onReachBottom(){
			//debugger;
			let allTotal=this.formData.page * this.formData.pageSize;
			if(allTotal < this.total){
				this.status = "loading";  //加载中状态
				//当前条数小于总条数 则增加请求页数
				this.formData.page ++;
				this.listActi() //调用加载数据方法
			}else{
				//console.log('已加载全部数据，显示已经到底了')
				this.status = "noMore"; //加载完状态
			}
		},
		onPullDownRefresh () {
			this.actiList=[];
			this.formData.page=1;
			//调用获取数据方法
			this.listActi();
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh ();
			}, 1000);
		},
		methods: {
			//顶部导航回退箭头点击触发
			leftClick(){
				uni.navigateBack();
			},
			//获取活动列表
			listActi(){
				let that=this;
				utils.listActi(that.formData).then(res => {
					console.log('获取可报名活动列表返回值==',res); 
					//debugger;
					if(res.data.code==200){
						var arr=res.data.rows;
						that.actiList=that.actiList.concat(arr);
						that.total=res.data.total;
						for(var i=0;i<that.actiList.length;i++){
							if(that.actiList[i].peName.length>18){
								that.actiList[i].peName=that.actiList[i].peName.substr(0,18)+"......";
							}
						}
					}
					if(res.data.code==500){
						let msg=res.data.msg;
						uni.navigateTo({
							url:'../error/error?errorMsg='+msg 
						})
					}
				}).catch(error => {
					uni.navigateTo({
						url:'../error/error?errorMsg='+error
					})
				})
			},
			
			//查看明细页面跳转
			showDetail(actiId){ //查看明细，并进行报名
				console.log("查看明细参数id==",actiId);
				uni.navigateTo({
					//url:"./actiDetail?actiId="+actiId+"&flag=1" ,
					url:"./actiDetail?actiId="+actiId ,
				});
			},
			//导航菜单页面跳转
			gotoMyActi(){
				uni.navigateTo({
					url:"./myActi",
				});
			},
			gotoMyActi_M() { //我创建的活动列表
				uni.navigateTo({
					url:"../acti_M/myActi_M" , 
				});
			},
			//在此上方补充函数
			
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.status_bar_space {
		height: 130rpx;
		width: 100%;
	}
	.page{
		height: 1650rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #F8F8F8	;	
	}
	.newsView{ /*每个图文信息容器*/
		width: 700rpx;
		height: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
	.newsView-up{ /*上半部分：左边1个图片，右边3行文字*/
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.up-L{ /*左边图片容器*/
		width: 250rpx;
		height: 170rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.img{ /*图片样式（有一定的圆角）*/
		width: 220rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}
	.up-M{ /*中间3行容器*/
		width: 350rpx;
		height: 170rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.line1{ /*中间第1行*/
		width: 350rpx;
		height: 70rpx;
		color: #1e2138;
		font-size: 30rpx;  
		text-align: left;
		font-family: MicrosoftYaHei;
		line-height: 35rpx;
	}
	.line2{ /*中间第2,3行*/
		width: 350rpx;
		height: 50rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #666666;
		font-size: 25rpx;  
		text-align: left;
		font-family: MicrosoftYaHei;
		line-height: 25rpx;
	}
	.up-R{ /*右边图标容器(可以居中靠右竖排1-2个图标)*/
		width: 100rpx;
		height: 170rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: flex-end;
	}
	.icon{
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}
	.newsView-down{ /*下半部分：1整行*/
		width: 700rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.fontStyle{
		color: #ababab;
		font-size: 25rpx;  
		//text-align: left;
		font-family: MicrosoftYaHei;
		line-height: 80rpx;
	}
	.gStyle{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	
	
	
	
	
</style>
